<template>
  <div class="sanstyle">
    <!--左边-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <!-- 延庆 叫保护动物 -->
            <!-- 哈素海 保护鸟类 -->
            <span class="dwz">保护动物</span>
            <br />
            <span class="xwz">To protect animals</span>
          </div>
          <div style="width: 2rem; text-align: left">
            <span style="color: white; font-size: 0.18rem">总计：</span>
            <span style="font-size: 0.28rem; color: #2efff2">{{
              animalsum
            }}</span>
            <span style="color: white; font-size: 0.18rem">种</span>
          </div>
        </div>
        <!--标题 E-->

        <!--统计图区域 B-->
        <div class="ecbox" id="bar1"></div>
        <!--统计图区域 E-->

        <div style="height: 0.5rem"></div>
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">植物统计</span>
            <br />
            <span class="xwz">To protect the plant</span>
          </div>
          <div style="width: 2rem; text-align: left">
            <span style="color: white; font-size: 0.18rem">总计：</span>
            <span style="font-size: 0.28rem; color: #2efff2">{{
              Plantsum
            }}</span>
            <span style="color: white; font-size: 0.18rem">种</span>
          </div>
        </div>
        <!--标题 E-->

        <!--统计图区域 B-->
        <div class="ecbox" style="background: none" id="bar2"></div>
        <!--统计图区域 E-->
      </div>
    </div>
    <!--左边-->
    <!--中间 B-->
    <div class="mapbox">
      <!--tab切换 B-->
      <div class="qhtab">
        <div
          v-for="(item, index) in navList"
          :key="index"
          @click="datamap(item.type)"
        >
          <img
            :src="
              item.sts ? '/static/images/tab1.png' : '/static/images/tab2.png'
            "
            alt=""
          />
          <span style="margin-left: 0.08rem">{{ item.name }}</span>
        </div>
      </div>
      <!--tab切换 E-->
      <!--中间地图 B-->
      <div id="map" style="height: 75%; width: 100%"></div>
      <!--中间地图 E-->

      <!--基本信息 B-->
      <div class="jbxxbox">
        <div class="jbxxtitle">
          <span style="color: white; font-size: 0.26rem; font-family: 'biaoti'"
            >基本信息</span
          >
          <br />
          <span class="xwz">The basic information</span>
        </div>

        <div class="jbxxtitle">
          <span style="color: white; font-size: 0.18rem; margin-right: 0.16rem"
            >境内</span
          >
          <span style="color: #2efff2; font-size: 0.24rem">{{ location }}</span>
        </div>

        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.2rem;
            margin-top: 0.1rem;
          "
        >
          <div>
            <span
              style="color: white; font-size: 0.18rem; margin-right: 0.16rem"
              >建立于(年)</span
            >
            <span style="color: #2efff2; font-size: 0.24rem">{{ setUp }}</span>
          </div>
          <div>
            <span
              style="color: white; font-size: 0.18rem; margin-right: 0.16rem"
              >海拔(米)</span
            >
            <span style="color: #2efff2; font-size: 0.24rem">{{
              altitude
            }}</span>
          </div>
          <div>
            <span
              style="color: white; font-size: 0.18rem; margin-right: 0.16rem"
              >占地约(公顷)</span
            >
            <span style="color: #2efff2; font-size: 0.24rem">{{ size }}</span>
          </div>
        </div>
      </div>
      <!--基本信息 E-->
    </div>
    <!--中间 E-->

    <!--右边 B-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">视频资料</span>
            <br />
            <span class="xwz">Video data</span>
          </div>
        </div>
        <!--标题 E-->
        <!--视频区域 B-->
        <div class="ecbox">
          <div class="rvbox">
            <video
              :src="'/api/visual/' + areaId + '/video.mp4'"
              controls
              autoplay="autoplay"
            ></video>
          </div>
        </div>
        <!--视频区域 E-->
        <div style="height: 0.5rem"></div>
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <!--  野鸭湖 <span class="dwz">保护区大事记</span>-->
            <span class="dwz">大事记</span>
            <br />
            <span class="xwz">Memorabilia of the Reserve</span>
          </div>
        </div>
        <!--标题 E-->

        <div class="ecbox" style="overflow: hidden; background: none">
          <div class="gdnr">
            <div class="dsj" v-for="(item, index) in dsjList" :key="index">
              <div style="flex: 1">
                <img src="/static/images/tab1.png" alt="" />
              </div>
              <div style="flex: 9">
                <span style="color: #34ceff">{{ item.time }}年 </span>
                <span>{{ item.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--右边 E-->
  </div>
</template>

<script>
import * as echarts from "echarts";
import http from "../utils/http";
import api from "../utils/api";

export default {
  name: "jbxx",
  data() {
    return {
      navList: [
        {
          name: "功能区划",
          type: "gnqh",
          sts: true,
        },
        {
          name: "网格",
          type: "wg",
          sts: false,
        }, 
      ],
      areaId: "",
      jbxxOBJ: {},
      location: "",
      size: "",
      setUp: "",
      altitude: "",
      dsjList: [],
      animalsum: 0,
      Plantsum: 0,
      bhqName: [],
      MapColor: [
        "rgba(203, 255, 252, 0.8)",
        "rgba(74, 239, 230, 0.8)",
        "rgba(4, 178, 169, 0.8)",
        "rgba(203, 255, 252, 0.8)",
        "rgba(114,8,82,.8)",
        "rgba(174,213,13,.8)",
        "rgba(194,133,112,.8)",
        "rgba(225,66,19,.8)",
        "rgba(94,60,190,.8)",
        "rgba(253,166,199,.8)",
      ],
    };
  },
  mounted() {
    this.getMap();
    let vm = this;
    (async function f() {
      let res = await http.get("/papi/0000085_json/gnqh.json");
      let arr = [];
      res.data.features.forEach((t) => {
        arr.push(t.properties.name);
      });
      vm.bhqName = arr;
      vm.datamap("gnqh");
    })();
  },
  created() {
    this.areaId = window.sessionStorage.getItem("areaId");
    this.getEvenDetail();
  },
  methods: {
    getEvenDetail() {
      let _that = this;
      (async function f() {
        let res = await http.get(api.EvenDetail + _that.areaId);
        _that.jbxxOBJ = res.data;
        _that.dsjList = res.data.baseInfo.evenDetail;
        _that.location = res.data.baseInfo.location;
        _that.size = res.data.baseInfo.size;
        _that.setUp = res.data.baseInfo.setUp;
        _that.altitude = res.data.baseInfo.altitude;
      })();
    },
    getMap() {
      let _that = this;
      (async function f() {
        let res = await http.get(api.LevelGroup + "?areaId=" + _that.areaId);
        if (res.data.code == "200") {
          let ao = res.data.data.animalMap;
          let po = res.data.data.plantMap;
          //ao.beijingLevelTwo   po.beijingLevelTwo
          // let animal = [ao.levelOne, ao.levelTwo, ao.beijingLevelOne];
          // let plant = [po.levelOne, po.levelTwo, po.beijingLevelOne];
          //延庆版本
          let animal = [
            ao.levelOne,
            ao.levelTwo,
            ao.beijingEmphasis,
            // ao.beijingLevelOne,
            // ao.beijingLevelTwo,
          ];
          let plant = [
            po.levelOne,
            po.levelTwo,
            po.beijingEmphasis,
            // po.beijingLevelOne,
            // po.beijingLevelTwo,
          ];
          _that.drawBar1(animal);
          _that.drawBar2(plant);
          _that.animalsum = ao.sum;
          _that.Plantsum = po.sum;
        } else {
          alert(res.data.message);
        }
      })();
    },

    //延庆区颜色
    yqColor(n) {
      if (n == "实验区") {
        return "rgba(203, 255, 252, 0.8)";
      }
      if (n == "核心区") {
        return "rgba(4, 178, 169, 0.8)";
      }
      if (n == "缓冲区") {
        return "rgba(74, 239, 230, 0.8)";
      }
    },
    datamap(flag) {
      this.maptype = flag;
      this.navList.forEach((e) => {
        if (flag == e.type) {
          e.sts = true;
        } else {
          e.sts = false;
        }
      });
      if (flag == "gnqh") {
        let url = "/papi/0000085_json/gnqh.json";
        let jsondata = [];
        this.bhqName.forEach((c, x) => {
          jsondata.push({
            name: c,
            value: 1,
            label: {
              show: false,
            },
            itemStyle: {
              show: true,
              areaColor: this.MapColor[x],
              borderColor: this.MapColor[x],
              borderWidth: "1",
            },

            //延庆版本
            // itemStyle: {
            //   show: true,
            //   areaColor: this.yqColor(c),
            //   borderColor: this.yqColor(c),
            //   borderWidth: "1",
            // },
          });
        });
        let geo = {
          type: "map",
          map: "GeoJson",
          regions: jsondata,
          zoom: 1.1,
          show: true,
          roam: true,
        };
        this.map(url, geo);
      }
      if (flag == "wg") {
        let geo = {
          map: "GeoJson",
          show: true,
          roam: true,
          zoom: 1.1,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "rgba(4, 178, 169, 0.8)",
              borderColor: "#4AEFE6",
              borderWidth: 1,
            },
            emphasis: {},
          },
        };
        let url = "/papi/0000085_json/wangge.json";
        this.map(url, geo);
      }
    },
    map(url, geo) {
      let vm = this;
      let myChart = echarts.getInstanceByDom(document.getElementById("map"));
      if (myChart == null) {
        // 如果不存在，就进行初始化
        myChart = echarts.init(document.getElementById("map"));
      } else {
        myChart.clear();
      }
      $.getJSON(url, function (geoJson) {
        echarts.registerMap("GeoJson", geoJson);
        myChart.showLoading("default", {
          text: "加载中，请稍候...",
          maskColor: "rgba(0,0,0,.3)",
          textColor: "#fff",
        });
        let option = {
          geo: geo,
          series: [],
        };
        myChart.setOption(option, true);
        setTimeout(function () {
          myChart.hideLoading();
          myChart.resize();
        }, 500);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    drawBar1(data) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar1"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar1"));
      }
      let color = ["#FF3B2E", "#FFDE2E", "#4B2EFF", "#2ECDFF"];
      let option = {
        xAxis: {
          type: "category",
          data: ["国家Ⅰ级", "国家Ⅱ级", "北京市重点"],
          //延庆版本
          // data: ["国家Ⅰ级", "国家Ⅱ级", "北京Ⅰ级", "北京Ⅱ级"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 16,
              fontFamily: "Pingfang",
            },
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        yAxis: {
          type: "value",
          show: false,
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "10%",
          bottom: "15%",
        },
        series: [
          {
            data: data,
            type: "bar",
            showBackground: true,
            barWidth: 70,
            backgroundStyle: {
              color: "rgba(46, 255, 242, 0.2)",
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
              fontSize: 18,
              fontFamily: "Pingfang",
              formatter: function (params) {
                return params.value + "种";
              },
            },
            itemStyle: {
              //定义柱子的样式
              // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
              //不同柱子颜色渐变
              color: (params) => ({
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color[params.dataIndex], // 柱子最高度% 处的颜色
                  },
                  {
                    offset: 0.8,
                    color: "transparent", // X轴处的颜色
                  },
                ],
                global: false, // 缺省为 false
              }),
              borderRadius: [10, 10, 0, 0], //柱子圆角[上右下左]，也可以统一值。
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawBar2(data) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar2"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar2"));
      }
      let color = ["#FF3B2E", "#FFDE2E", "#4B2EFF", "#2ECDFF"];
      let option = {
        xAxis: {
          type: "category",
          data: ["国家Ⅰ级", "国家Ⅱ级", "北京市重点"],
          //延庆版本
          // data: ["国家Ⅰ级", "国家Ⅱ级", "北京Ⅰ级", "北京Ⅱ级"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 16,
              fontFamily: "Pingfang",
            },
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        yAxis: {
          type: "value",
          show: false,
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "10%",
          bottom: "15%",
        },
        series: [
          {
            data: data,
            type: "bar",
            showBackground: true,
            barWidth: 70,
            backgroundStyle: {
              color: "rgba(46, 255, 242, 0.2)",
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
              fontSize: 18,
              fontFamily: "Pingfang",
              formatter: function (params) {
                return params.value + "种";
              },
            },
            itemStyle: {
              //定义柱子的样式
              // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
              //不同柱子颜色渐变
              color: (params) => ({
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color[params.dataIndex], // 柱子最高度% 处的颜色
                  },
                  {
                    offset: 0.8,
                    color: "transparent", // X轴处的颜色
                  },
                ],
                global: false, // 缺省为 false
              }),
              borderRadius: [10, 10, 0, 0], //柱子圆角[上右下左]，也可以统一值。
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
@import "../../static/css/jbxx.css";
</style>
